/* tslint:disable:jsx-no-multiline-js */
import React from 'react';
import {
  Image,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import Button from '../button/Button';



export default class Result extends React.Component{
  static defaultProps = {
    buttonType: '',
    buttonClick: () => {},
  };

  render() {
    const {
      style,
      img,
      imgUrl,
      title,
      message,
      buttonText,
      onButtonClick,
      buttonType,
    } = this.props;

    let imgContent = null;
    if (img) {
      imgContent = <View style={styles.imgWrap}>{img}</View>;
    } else if (imgUrl) {
      imgContent = (
        <View style={styles.imgWrap}>
          <Image
            source={imgUrl}
            style={styles.img}
          />
        </View>
      );
    }

    return (
      <View style={[styles.result, style]}>
        {imgContent}
        {title ? (
          <View style={styles.title}>
            {typeof title === 'string' ? (
              <Text style={styles.titleText}>{title}</Text>
            ) : (
              title
            )}
          </View>
        ) : null}
        {message ? (
          <View style={styles.message}>
            {typeof message === 'string' ? (
              <Text style={styles.messageText}>{message}</Text>
            ) : (
              message
            )}
          </View>
        ) : null}
        {buttonText ? (
          <View style={styles.buttonWrap}>
            <Button
              style={styles.button}
              type={buttonType}
              onClick={onButtonClick}
            >
              {buttonText}
            </Button>
          </View>
        ) : null}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  result: {
    alignItems: 'center',
    paddingVertical: 21,
    backgroundColor: '#ffffff',
    borderBottomColor: '#dddddd',
  },
  imgWrap: {
    margin: 0,
  },
  img: {
    width: 60,
    height: 60,
  },
  title: {
    marginTop: 15,
    paddingHorizontal: 15,
  },
  titleText: {
    fontSize: 21,
    color: '#000',
  },
  message: {
    marginTop: 15,
    paddingHorizontal: 15,
  },
  messageText: {
    fontSize: 16,
    color: '#888888',
  },
  buttonWrap: {
    flexDirection: 'row',
    marginTop: 15,
    paddingHorizontal: 15,
  },
  button: {
    flex: 1,
  },
})
